<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="艾柏工作室是一个集名片制作、微信开发、网页设计、二维码链接的多功能网站。">
    <meta name="keywords" content="艾柏工作室,网页设计,名片制作,二维码宣传,电子名片,网页传单，交互式网页设计 ">
    <meta name="author" content="王有才<abcwyc@gmail.com>">
    <!-- 标签logo -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    
    <title>艾柏工作室</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    body{
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .carousel{
      height:500px;
      background-color: #000;
      margin-bottom: 50px;
    }
    .carousel .item{
      height:500px;
      background-color:#000;
    }
    .carousel img{
      width:100%;
    }
    .carousel-caption p{
      margin-bottom: 5px;
      font-size:20px;
      line-height:1.8;
    }
     #summary-container .col-md-3{
      text-align: center;
     }
    hr.divider{
      margin:40px 0;
    }
    .feature{
      padding:30px 0;
    }
    .feature-heading{
      font-size: 50px;
      color: #2a6496;
      margin-top:120px;
    }
    .feature-heading .text-muted{
      font-size: 28px;
      color: #999
    }

    </style>

  </head>
  <body>
  <!-- 顶部导航条 -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">艾柏工作室</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="demo-navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#" data-toggle="modal" data-target="#contact">联系我们</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务范围 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#tab-mp">名片制作</a></li>
                <li><a href="#tab-wx">微信平台整合</a></li>
                <li><a href="#tab-yd">移动端网站定制</a></li>
                <li class="divider"></li>
                <li><a href="#tab-ewm">二维码全攻略</a></li>
                <li class="divider"></li>
                <li><a href="#tab-js">技术支持</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Able Studio">
            </div>
            <!-- <button type="submit" class="btn btn-default">搜索</button> -->
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="http://weibo.com/wycai" target="_blank">@有才wang</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">作品展示 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="index.html">Able Studio</a></li>

              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
 



  <!-- 970px的网页框架从这个div开始的 -->
    <div class="container" id="summary-container">

      <!-- 轮播图片组件 -->
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/lunbo3.jpg" alt="二维码扫描">
            <div class="carousel-caption">
              <!-- ... -->
            </div>
          </div>
          <div class="item">
            <img src="img/lunbo2.jpg" alt="网页制作">
            <div class="carousel-caption">
              <!-- ... -->
            </div>
          </div>
          <div class="item">
            <img src="img/lunbo1.jpg" alt="名片制作">
            <div class="carousel-caption">
              <!-- <h1>名片制作</h1>
              <p>您只需要提供信息和需求，剩下的交给我们就好。</p> -->
              <!-- <p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">我要做名片</a></p> -->
            </div>

          </div>
          
        </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>


      <!-- tab标签页的制作 -->
      <ul class="nav nav-tabs" role="tablist" id="tab-list">
        <li class="active"><a href="#tab-about-able" role="tab" data-toggle="tab">关于艾柏</a></li>
        <li><a href="#tab-mp" role="tab" data-toggle="tab">名片制作</a></li>
        <li><a href="#tab-wx" role="tab" data-toggle="tab">微信平台整合</a></li>
        <li><a href="#tab-yd" role="tab" data-toggle="tab">移动端网站定制</a></li>
        <li><a href="#tab-ewm" role="tab" data-toggle="tab">二维码全攻略</a></li>
        <li><a href="#tab-js" role="tab" data-toggle="tab">技术支持</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="tab-about-able">

          <div class="row feature">
            <div class="col-md-7">
              <h3 class="feature-heading">Able Studio <span class="text-muted">  One is all.Less is more.</span></h3>
              <p class="lead">用优秀的设计帮助企业创造具有影响力和价值的体验，创造超越竞争对手的品牌竞争力，以深度拓展的商业价值，多功能的宣传渠道帮助客户实现商业目标，驱动企业的持续发展。</p>
            </div>
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-logo.png" alt="关于艾柏">
            </div>
          </div>

        </div>
        <div class="tab-pane" id="tab-mp">
          
          <div class="row feature">
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-mp.png" alt="名片制作">
            </div>
            <div class="col-md-7">
              <h3 class="feature-heading">好 · 名片 <span class="text-muted">  可以承载更多</span></h3>
              <p class="lead">很多年前，名片只是记录联系方式的小卡片，但今天，当你向客户递出名片的同时，传递的更多的是产品和服务，是企业文化和形象。这个时候，一张优雅的名片就显得十分必要了。</p>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="tab-wx">
          
          <div class="row feature">
            <div class="col-md-7">
              <h3 class="feature-heading">微信公众号 <span class="text-muted">  再小的个体，也有自己的品牌</span></h3>
              <p class="lead">如果你觉得做网站技术门槛高，推广又特费劲，那么微信公众平台或许是一个不错的选择，利用微信公众平台进行自媒体活动，提升企业和产品的知名度，创造更好的粘性，形成一个良好的生态循环。</p>
            </div>
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-wx.png" alt="微信平台整合">
            </div>
          </div>

        </div>
        <div class="tab-pane" id="tab-yd">
          
          <div class="row feature">
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-yd.png" alt="移动端网站定制">
            </div>
            <div class="col-md-7">
              <h3 class="feature-heading">响应式网页 <span class="text-muted">  优雅的体验</span></h3>
              <p class="lead">移动端网站是在充分衡量平台的有限性和机遇后为移动设备专门设计的。因为屏幕尺寸小和交互方式（触摸）和有限的网速(2G/3G)等局限性问题，决定了它必须具备方便快捷，加载速度快，可读性高等特点。同时需要具备响应效果以适应各种尺寸的屏幕。</p>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="tab-ewm">
          
          <div class="row feature">
            <div class="col-md-7">
              <h3 class="feature-heading">二维码 <span class="text-muted">  简单-快捷-方便</span></h3>
              <p class="lead">“二维码”已经不是陌生的词汇，这个黑白小方格组成的矩阵图案，只需用手轻松一拍，就可获得意想不到的丰富信息。二维码营销方式因其创新性、互动性，让传统广告从“反感扰人”变得“亲切宜人”。</p>
            </div>
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-2code.png" alt="二维码全攻略">
            </div>
          </div>

        </div>
        <div class="tab-pane" id="tab-js">
          
          <div class="row feature">
            <div class="col-md-5">
              <img class="feature-image img-responsive" src="img/big-js.png" alt="技术支持">
            </div>
            <div class="col-md-7">
              <h3 class="feature-heading">技术支持 <span class="text-muted">  有问题找我</span></h3>
              <p class="lead">不修边幅的狂野大叔，唏嘘的胡茬子什么的最性感了。微信公众号、PS、HTML5、CSS3、服务器什么的这都不叫事儿，叔就是奔放。—— 那什么，我找BUG去了。</p>
            </div>
          </div>

        </div>
      </div>

      <script>
        $(function () {
          $('#myTab a:last').tab('show')
        })
      </script>

      <hr class="divider">


    <!-- 四个圆圈图标内容 -->
      <div class="row">
        <div class="col-md-3">
          <img class="img-circle" src="img/c-mp.jpg" alt="">
          <h3>名片制作</h3>
          <p>business cards MX</p>
          <!-- <p><a class="btn btn-default" href="#tab-mp" role="button">查看更多</a></p> -->
        </div>
        <div class="col-md-3">
          <img class="img-circle" src="img/c-wx.jpg" alt="">
          <h3>微信平台整合</h3>
          <p>Wechat Develop</p>
          <!-- <p><a class="btn btn-default" href="#" role="button">查看更多</a></p> -->
        </div>
        <div class="col-md-3">
          <img class="img-circle" src="img/c-yd.jpg" alt="">
          <h3>移动端网站定制</h3>
          <p>Mobile Website</p>
          <!-- <p><a class="btn btn-default" href="#" role="button">查看更多</a></p> -->
        </div>
        <div class="col-md-3">
          <img class="img-circle" src="img/c-js.jpg" alt="">
          <h3>技术支持</h3>
          <p>Technical Support</p>
          <!-- <p><a class="btn btn-default" href="#" role="button">查看更多</a></p> -->
        </div>
      </div>
      <hr class="divider">

      <!-- 底部版权信息 -->
      <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>Copyright © 2014 Ablestu.com All Rights Reserved
      </footer>
      


    </div>
  
<!-- 弹出框 联系方式 -->
    <div class="modal fade" id="contact">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">联系方式</h4>
          </div>
          <div class="modal-body">

          <!-- 弹出框里的内容 -->
            <div>
                    <h3></h3>
                    <p><i class="glyphicon glyphicon-comment"></i> 
                        <abbr title="即时通讯">QQ</abbr>: 304348580</p>
                    <p><i class="glyphicon glyphicon-phone"></i> 
                        <abbr title="联系电话">Tel</abbr>: (+86) 188-0196-4647</p>
                    <p><i class="glyphicon glyphicon-envelope"></i> 
                        <abbr title="电子邮件">Email</abbr>: <a href="mailto:abcwyc@gmail.com">abcwyc@gmail.com</a>
                    </p>
                    <p><i class="glyphicon glyphicon-time"></i> 
                        <abbr title="工作时间">Work</abbr>: Monday - Friday: 9:00 AM to 5:00 PM</p>
            </div>
          <!-- 弹出框内容结束 -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">知道了</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 关于链接到tab的JS代码 -->
    <script>
       $(document).ready(function(){
         $("#demo-navbar .dropdown-menu a").click(function(){
          var href = $(this).attr("href");
          $("#tab-list a[href='" + href + "']").tab("show");

         });
       });
    </script>
  </body>
</html>
